<template>
  <div>
    <client-only>
      <div class="uk-section">
        <div class="uk-container uk-container-large">
          <h2 style="text-align: center">{{ category.name }}</h2>
          <Photo :articles="articles || []" />
        </div>
      </div>
      <Bottom />
    </client-only>
  </div>
</template>

<script>
import Photo from "@/components/Photo";
import Bottom from "@/components/Bottom";
import { getMetaTags } from "../../utils/seo";
import { getStrapiMedia } from "../../utils/medias";

export default {
  components: {
    Bottom,
    Photo,
  },
  async asyncData({ $strapi, params }) {
    const matchingCategories = await $strapi.find("categoryphotos", {
      slug: params.slug,
    });
    console.log(matchingCategories[0]);
    return {
      category: matchingCategories[0],
      articles: await $strapi.find("photos", {
        "categoryphoto.name": matchingCategories[0].name,
      }),
      global: await $strapi.find("global"),
    };
  },
  head() {
    const { defaultSeo, favicon, siteName } = this.global;

    // Merge default and article-specific SEO data
    const fullSeo = {
      ...defaultSeo,
      metaTitle: `${this.category.name} articles`,
      metaDescription: `All articles about ${this.category.name}`,
    };

    return {
      title: fullSeo.metaTitle,
      titleTemplate: `%s | ${siteName}`,
      meta: getMetaTags(fullSeo),
      link: [
        {
          rel: "favicon",
          href: getStrapiMedia(favicon.url),
        },
      ],
    };
  },
};
</script>
